<template>
	<view class="pay-result">
		<view class="page-header-bar">
			<u-navbar :is-back="false"
								:background="navbarBackground"
								:height="navigationHeight"
								:is-fixed="false"
								:border-bottom="false">
				<view class="am-flex-row-center navbar-slot-wrap"
							:style="{ paddingRight: `${menuPlaceWidth}px` }">
				</view>
				<view class="wx-name"> 我的 </view>
			</u-navbar>
		</view>
		<view class="nav-bar-place"
					:style="{
        height: `${navBarHeight}px`
      }"></view>
		<view class="search-bar-place"
					:style="{ height: `20px` }"></view>
		<view class="user-wrap">
			<view class="user-section"
						v-if="isLogin">
				<view @click="goUserInfo"
							class="user-avatar">
					<image :src="
              userinfo.img ||
              'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/23/a6aa6442a8d349b1bad9d43f342dbcd2logo.png'
            "
								 mode="aspectFill"
								 class="am-block user-avatar-img"
								 webp></image>
				</view>
				<view class="user-section-con">
					<view class="user-section-top">
						<view class="user-supplier-name am-text-eill">{{
              userinfo.realName || userinfo.nickName
            }}</view>
						<view @click="goInvitePage"
									class="user-vip-code">
							会员邀请码：{{ userinfo.invitationCode || '-' }}
						</view>
					</view>
				</view>
			</view>
			<view class="balance-box am-flex-rc-around">
				<view class="balance-item am-flex-col-center">
					<view class="balance-num">{{ userinfo.pointAmount || 0 }} </view>
					<view class="balance-text">积分</view>
				</view>
				<view @click="checkBalance"
							class="balance-item am-flex-col-center">
					<view class="balance-num">{{ userinfo.balance || 0.0 }} </view>
					<view class="balance-text">余额</view>
				</view>
				<view class="balance-item am-flex-col-center">
					<view class="balance-num">{{ userinfo.inviteNum || 0 }} </view>
					<view class="balance-text">推荐用户</view>
				</view>
			</view>
		</view>

		<view class="mine-panel-section first-panel-section">
			<PanelSection title="我的订单"
										:content="orderContent"
										@itemHandle="orderItemHandle"
										:flex="25">
				<view slot="headerRight">
					<navigator url="/pages/order/order"
										 class="order-nav-all">
						全部
						<view style="margin: 0 15rpx"
									class="am-inline-block"><u-icon name="arrow-right"
											size="20"
											color="#1D2129"></u-icon></view>
					</navigator>
				</view>
			</PanelSection>
		</view>

		<view class="mine-panel-section">
			<PanelSection title="常用功能"
										:content="toolContent"
										@itemHandle="toolItemHandle"
										:flex="25"></PanelSection>
		</view>
		<view class="logout-wrap am-flex-rc-center"
					hover-class="logout-wrap--hover"
					@click="logout">退出登录</view>
		<!-- <view class="co-place" @click="toUrl()">技术支持咨询</view> -->
	</view>
</template>

<script>
import { findMyOrderCount } from '@/api/shoppingCart'
import tabbarPage from '@/mixins/tabbarPage'
import { appOnLaunch } from '@/utils/appGlobalLifeCycle'
import { navBarHeight } from '@/utils/systemInfo.js'
import PanelSection from './components/panel-section.vue'

export default {
	data () {
		return {
			cellTitleSty: {
				fontSize: '30rpx',
				color: '#333'
			},
			// supplierVisible: false,
			// 供应商列表
			navBarHeight,
			orderContent: [
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/89627e8a636946eda0829637421443bemoney-time@2x.png',
					name: '待支付',
					status: '-1',
					uname: 'waitPayCount',
					num: 0
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/b4b16ff1f22b480cbfcf47f2ca13d9c7组 2357@2x.png',
					name: '派送中',
					status: '1',
					uname: 'sending',
					num: 0
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/46652e1b28614ba8b29c6fe9352c4e1d容器@2x.png',
					name: '已完成',
					status: '2',
					uname: '',
					num: 0
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/68425336349c4014ab84756dc325f22dquit@2x.png',
					name: '退款/售后',
					url: '/pages/order/order?after=yes',
					uname: 'afterSalesCount',
					num: 0
				}
			],
			toolContent: [
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/46458bdbb3874510ae48fadccccdf660order.png',
					name: '订单管理',
					url: '/pages/order/order',
					handle: null
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/9ec9b6d6ecdd40b986fd17b9d017f25caddress.png',
					name: '地址管理',
					url: '/pages/customer/customer-list',
					handle: null
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/003691595c934d299147782c29ff0daefund.png',
					name: '消费记录',
					url: '/pages/mine/fund-record',
					handle: null
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/7fde6f1282e14843a2b1c95615600a29goods_selected.png',
					name: '邀请有礼',
					url: '/pages/mine/invitations',
					handle: null
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/e9cf199c2940417e91adf8df64801cddcash-back.png',
					name: '提现返现金',
					url: '/pages/mine/money-management',
					handle: null
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/26/79d638680137469d9613b89b9e94d544addprice.png',
					name: '账户充值',
					url: '/pages/mine/account-recharge',
					handle: null
				},
				{
					icon: 'https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/10/24/91655028200e42a58bbd796ebf033e92容器@2x.png',
					name: '提现记录',
					url: '/pages/mine/money-records',
					handle: null
				}
			]
		}
	},
	components: {
		PanelSection
	},
	mixins: [tabbarPage],
	computed: {
		isLogin () {
			return this.$store.getters.isLogin
		},
		userBalance () {
			return this.$store.getters.curSupplierData.balance
		},
		userinfo () {
			return this.$store.state.userInfo
		}
	},
	onLoad () { },
	onShow () {
		if (!this.$store.getters.isLogin) {
			appOnLaunch()
			return
		}
		this.getMyCartNum()
		this.updateUser()
	},
	onPullDownRefresh () {
		this.updateUser()
	},
	methods: {
		goInvitePage () {
			this.$u.route('/pages/mine/invitations')
		},
		goUserInfo () {
			this.$u.route('/pages/mine/userinfo')
		},
		checkBalance () {
			this.$u.route('/pages/mine/money-management')
		},
		getMyCartNum () {
			findMyOrderCount().then((res) => {
				this.orderContent.map((item) => {
					return (item.num = res.data.data[item.uname])
				})
			})
		},
		updateUser () {
			this.$store
				.dispatch('updateUserinfo')
				.then(() => {
					uni.stopPullDownRefresh()
				})
				.catch(() => {
					uni.stopPullDownRefresh()
				})
		},
		// 退出登录
		logout () {
			uni.showModal({
				content: '确认退出登录？',
				confirmColor: '#4BB019',
				success: (logRes) => {
					if (logRes.confirm) {
						this.$store.dispatch('userLogout').then(() => {
							this.$am_toast.success('退出登录成功！')
							uni.reLaunch({
								url: '/pages/wxlogin/wxlogin'
							})
						})
					}
				}
			})
		},
		toUrl () {
			this.$u.route('pages/customer/consult')
		},
		orderItemHandle (p_data) {
			console.log(p_data)
			if (typeof p_data.value.status !== 'undefined') {
				this.$u.route('pages/order/order', { status: p_data.value.status })
			} else {
				uni.navigateTo({
					url: p_data.value.url
				})
			}
		},
		toolItemHandle (p_data) {
			console.log(p_data.value.handle)
			let itemData = p_data.value
			if (itemData.url) {
				uni.navigateTo({
					url: itemData.url
				})
			} else if (!itemData.url) {
				uni.showToast({
					title: '正在开发中。。。',
					duration: 2000,
					icon: 'none'
				})
			} else if (itemData.handle) {
				itemData.handle()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
$page-plr: 24rpx;
$section-plr: 32rpx;
.user-wrap {
	min-height: 314rpx;
}
.user-section {
	display: flex;
	padding: 0 30rpx;
}
.user-avatar {
	overflow: hidden;
	width: 128rpx;
	height: 128rpx;
	flex-shrink: 0;
	border-radius: 50%;
}
.user-section-con {
	flex: 1;
	width: 0;
	margin-left: 24rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.select-icon-wrap {
	width: 40rpx;
	flex-shrink: 0;
}
.user-supplier-name {
	font-size: 40rpx;
	font-weight: 600;
	color: #1d2129;
	line-height: 56rpx;
}

.user-realname {
	margin-left: 40rpx;
	margin-top: 20rpx;
	font-size: 24rpx;
	color: #ffffff;
}
.balance-box {
	width: 702rpx;
	height: 128rpx;
	background: url('https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/10/08/9265c7631b8e4728a26631dc9367070f卡片@2x.png');
	background-repeat: repeat-x;
	background-size: cover;
	padding: 0 $section-plr;
	margin: $page-plr;
	border-radius: 16rpx;
	.balance-num {
		font-weight: 500;
		font-size: 32rpx;
		color: #633c10;
		line-height: 42rpx;
	}
	.balance-text {
		margin-top: 10rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #633c10;
		line-height: 30rpx;
	}
}
.panel-section {
	overflow: hidden;
	margin-left: $page-plr;
	margin-right: $page-plr;
	background: #ffffff;
	border-radius: 24rpx;
	& + .panel-section {
		margin-top: 16rpx;
	}
}
.panel-cell__icon-wrap {
	width: 44rpx;
	height: 44rpx;
	margin-right: 35rpx;
}
.panel-cell__icon-img {
	width: 44rpx;
	height: 44rpx;
}
.custom-cell-item {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		z-index: 1;
		border-top: 1px solid #e8e8e8;
		height: 1px;
		width: 568rpx;
		left: 108rpx;
	}
}
.logout-wrap {
	height: 90rpx;
	margin: 50rpx $page-plr 0;
	border-radius: 24rpx;
	font-size: 28rpx;
	color: #86909c;
	line-height: 32rpx;
}
.logout-wrap--hover {
	background-color: #f7f8f9;
}
.mine-panel-section {
	margin-left: $page-plr;
	margin-right: $page-plr;
	& + .mine-panel-section {
		margin-top: 16rpx;
	}
}
.order-nav-all {
	font-size: 26rpx;
	color: #1d2129;
	line-height: 36rpx;
}
.co-place {
	text-align: center;
	margin: 50rpx 0;
	line-height: 50rpx;
	color: #0099ff;
}
.page-header-bar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 750rpx;
	height: 380rpx;
	background-image: url('https://kc-glasses-mall-langjing.oss-cn-chengdu.aliyuncs.com/2024/09/20/49bbea20748940fa840b41751979e43f容器 62@2x.png');
	background-repeat: repeat-x;
	background-size: cover;
}
.navbar-title-img {
	display: block;
	width: 162rpx;
	height: 40rpx;
}
.navbar-slot-wrap {
	position: absolute;
	width: 750rpx;
	padding-left: $page-plr;
	left: 0;
}
.wx-name {
	margin-left: 40rpx;
	width: 160rpx;
	height: 54rpx;
	font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
	font-weight: 900;
	font-size: 40rpx;
	color: #1a1a1a;
	line-height: 54rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.search-bar-place {
	height: 84rpx;
}
.user-avatar-img {
	width: 128rpx;
	height: 128rpx;
	object-fit: cover;
}
.user-vip-code {
	margin-top: 15rpx;
	font-size: 24rpx;
	color: #767676;
	line-height: 32rpx;
}
</style>
